<!--
 * @description 指示器组件
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
-->
<template>
	<!-- 圆点模式 -->
	<pure-indicator-dot
		v-if="mode === 'dot'"
		v-bind="_childProps"
		@onItemClick="$emit('onItemClick', $event)"
	></pure-indicator-dot>

	<!-- 条状模式 -->
	<pure-indicator-bar
		v-else-if="mode === 'bar'"
		v-bind="_childProps"
		@onItemClick="$emit('onItemClick', $event)"
	></pure-indicator-bar>

	<!-- 线模式 -->
	<pure-indicator-line
		v-else-if="mode === 'line'"
		v-bind="_childProps"
	></pure-indicator-line>

	<!-- 数字模式 -->
	<pure-indicator-number
		v-else-if="mode === 'number'"
		v-bind="_childProps"
	></pure-indicator-number>

	<!-- 下标模式 -->
	<pure-indicator-index
		v-else-if="mode === 'index'"
		v-bind="_childProps"
		@onItemClick="$emit('onItemClick', $event)"
	></pure-indicator-index>

	<!-- 标题模式 -->
	<pure-indicator-title
		v-else-if="mode === 'title'"
		v-bind="_childProps"
		@onItemClick="$emit('onItemClick', $event)"
	></pure-indicator-title>

	<!-- 进度模式 -->
	<pure-indicator-progress
		v-else-if="mode === 'progress'"
		v-bind="_childProps"
	></pure-indicator-progress>
</template>

<script>
	import commonComponentOptions from "../../config/options";
	export default {
		options: commonComponentOptions
	};
</script>

<script setup>
	import { ref, computed } from "vue";
	import props from "./props";

	// -------------------------------------------------------------------------------- Props
	const _props = defineProps(props);

	// -------------------------------------------------------------------------------- Emits
	const _emits = defineEmits(["onItemClick"]);

	// -------------------------------------------------------------------------------- Classes
	const _classes = computed(() => {
		const array = [];
		return array;
	});

	// -------------------------------------------------------------------------------- Styles
	const _styles = computed(() => {
		const array = [];
		return array;
	});

	// 传给子组件的参数
	const _childProps = computed(() => {
		const mode = _props?.mode;

		// bar
		if (mode === "bar") {
			return {
				total: _props?.total,
				current: _props?.current,
				color: _props?.color,
				activeColor: _props?.activeColor,
				width: _props?.barWidth,
				height: _props?.barHeight
			};
		}

		// dot
		if (mode === "dot") {
			return {
				total: _props?.total,
				current: _props?.current,
				color: _props?.color,
				activeColor: _props?.activeColor,
				size: _props?.dotSize
			};
		}

		// index
		if (mode === "index") {
			return {
				total: _props?.total,
				current: _props?.current,
				color: _props?.color,
				activeColor: _props?.activeColor,
				size: _props?.indexSize,
				fontSize: _props?.indexFontSize
			};
		}

		// line
		if (mode === "line") {
			return {
				total: _props?.total,
				current: _props?.current,
				color: _props?.color,
				activeColor: _props?.activeColor,
				width: _props?.lineWidth,
				height: _props?.lineHeight
			};
		}

		// number
		if (mode === "number") {
			return {
				total: _props?.total,
				current: _props?.current,
				color: _props?.color,
				activeColor: _props?.activeColor,
				separator: _props?.separator
			};
		}

		// progress
		if (mode === "progress") {
			return {
				total: _props?.total,
				current: _props?.current,
				color: _props?.color,
				activeColor: _props?.activeColor,
				width: _props?.progressWidth,
				height: _props?.progressHeight
			};
		}

		// title
		if (mode === "title") {
			return {
				list: _props?.list,
				total: _props?.total,
				current: _props?.current,
				color: _props?.color,
				activeColor: _props?.activeColor,
				fontSize: _props?.titleFontSize,
				titleKey: _props?.titleKey
			};
		}

		return _props;
	});
</script>
